<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" :title="title" :border-bottom="false"></u-navbar>
		<view class="tuwen-div">
			<view class="tuwen-div-d">
				<view class="font_weight font_18_333">
					{{detailList.title}}
				</view>
				<view class="font_12_999 u-m-t-24" v-if="type==1">
					类型：{{detailList.tag_name}}
				</view>
				
				<view class="flex flex_sb u-m-t-24" v-if="type==2">
					<view class="font_12_999">
						{{detailList.created_at}}
					</view>
					<view class="font_12_999">
						{{detailList.view_count+1}}浏览
					</view>
				</view>
				<view class="" v-if="detailList.images && detailList.images.length>0">
					<view class=" u-m-t-48" v-for="(item,index) in detailList.images" :key="index"
					v-if="item.split('.').pop()=='png' || item.split('.').pop()=='jpg'" >
						<!-- <image class="addimg"  :src="item" mode="aspectFill"></image> -->
						<image style="width: 100%;" :src="item" :style="{ height: imgHeight + 'px' }" mode="widthFix"
							@load="onImgLoad">
						</image>
					</view>
					<view class="addimg u-m-t-48" v-for="(item,index) in detailList.images" :key="index"
					 v-if="item.split('.').pop()=='mp4'">
					    <video class="addimg"  :src="item" controls></video>
					 </view>
				</view>
				<view class="u-m-t-48">
					<rich-text :nodes="richText"></rich-text>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { formatRichText } from '@/static/richText.js'
	export default {
		data() {
			return {
				richText:'',
				type:1,
				id:'',
				detailList:[],
				title:''
			}
		},
		onLoad(e) {
			this.type = e.type
			if(this.type==1){
				this.title = "案例详情"
				this.id = e.id
				this.detail()
			}else{
				this.title = "知识分享详情"
				this.id = e.id
				this.detail2()
			}
			
			
		},
		methods: {
			onImgLoad(e) {
				// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
				const {
					width,
					height
				} = e.mp.detail;
				this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
			},
			detail(){
				this.$api({
					url: '/lawyer/getCaseInfo',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						id:this.id 
					},
				}).then(res => {
					if (res.code == 1) {
						this.detailList = res.data
						this.richText = formatRichText(this.detailList.content)
					} 
				})
			},
			detail2(){
				this.$api({
					url: '/lawyer/getKnowledgeInfo',
					method: 'get',
					data: {
						token:uni.getStorageSync("token"),
						id:this.id
					},
				}).then(res => {
					if (res.code == 1) {
						this.detailList = res.data
						this.richText = formatRichText(this.detailList.content)
					} 
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tuwen-div {
		padding-bottom: 280rpx;

		.tuwen-div-d {
			padding: 28rpx 32rpx;
		}
	}
	.addimg{
		width: 100%;
		height: 384rpx;
	}
</style>